<template>
    <transition
        name="slide"
        mode="out-in"
    >
        <div
            id="edit-user"
            class="pageAbsolute content-common"
        >
            <content-header></content-header>
            <div class="content-info">
                <div class="content-info-container">
                    <div class="title">
                        {{ title }}
                    </div>
                    <div class="form-info">
                        <div class="form-list">
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>网名</span>
                                </div>
                                <div class="input">
                                    <input
                                        v-model="userInfo.netName"
                                        type="text"
                                        placeholder="请输入网名"
                                    >
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>性别</span>
                                </div>
                                <div class="input">
                                    <el-select
                                        v-model="userInfo.sex"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in sexOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <div class="form-list">
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>职业</span>
                                </div>
                                <div class="input">
                                    <input
                                        v-model="userInfo.profession"
                                        type="text"
                                        placeholder="请输入职业"
                                    >
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>籍贯</span>
                                </div>
                                <div class="input">
                                    <input
                                        v-model="userInfo.nativePlace"
                                        type="text"
                                        placeholder="请输入籍贯"
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="form-list through">
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>邮箱</span>
                                </div>
                                <div class="input">
                                    <input
                                        v-model="userInfo.mail"
                                        type="text"
                                        placeholder="请输入邮箱"
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="form-list through">
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>微信图</span>
                                </div>
                                <div class="input">
                                    <el-upload
                                        ref="elUpload"
                                        :action="uploadAction"
                                        list-type="picture-card"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :on-success="handleSuccess"
                                        :limit="1"
                                        :file-list="fileList"
                                        class="upload"
                                    >
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img
                                            width="100%"
                                            :src="dialogImageUrl"
                                            alt=""
                                        >
                                    </el-dialog>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    import ContentHeader from 'cmpts/ContentHeader.vue';
    import { HOST } from 'assets/js/config';
    import { searchConfigure, addUser, editUser } from 'assets/js/api';
    export default {
        components: {
            ContentHeader
        },
        data () {
            return {
                from: '', // 什么方式进入 add or edit
                sexOptions: [], // 性别配置信息
                dialogImageUrl: '', // 预览时图片的地址
                dialogVisible: false, // 预览时遮罩flag
                uploadAction: `${ HOST }/system/upload/wechatImagesUpload` // 微信图上传接口
            };
        },
        computed: {
            title () {
                return this.from === 'add' ? '添加用户' : '编辑用户';
            },
            ...mapState([
                'userInfo'
            ]),
            fileList () {
                let fileList = [];
                if (this.from === 'edit') {
                    fileList.push({
                        url: this.userInfo.wechatImg
                    });
                }
                return fileList;
            }
        },
        mounted () {
            this.from = this.$route.query.from;
            this.searchConfigure();
        },
        methods: {
            ...mapMutations({
                setUserInfo: 'SET_USER_INFO'
            }),
            /**
             * 保存
             */
            save () {
                if (this.from === 'add') {
                    this.addUser();
                } else {
                    this.editUser();
                }
            },
            /**
             * 取消
             */
            cancel () {
                this.setUserInfo({});
            },
            /**
             * 添加用户
             */
            addUser () {
                addUser(this.userInfo).then(res => {
                    if (!res.status) {
                        this.$message.info(res.msg);
                        return;
                    }
                    this.$message.success(res.msg);
                    this.cancel();
                    this.$refs.elUpload.clearFiles();
                });
            },
            /**
             * 修改用户信息
             */
            editUser () {
                editUser(this.userInfo).then(res => {
                    if (!res.status) {
                        this.$message.info(res.msg);
                        return;
                    }
                    this.$message.success(res.msg);
                    this.cancel();
                    this.$router.go(-1);
                });
            },
            handleRemove (file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview (file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleSuccess (res, file, fileList) {
                let data = JSON.parse(file.response.data);
                this.userInfo.wechatImg = data.path;
            },
            /**
             * 查询性别的配置信息
             */
            searchConfigure () {
                searchConfigure({
                    type: 'sex'
                }).then(res => {
                    if (!res.status) {
                        this.$message.info(res.msg);
                        return;
                    }
                    let result = res.data.map(item => {
                        item.label = item.name;
                        item.value = item.name;
                        return item;
                    });
                    this.sexOptions = result;
                });
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/contentCommon';
</style>
